<section class="component">
  <h4 id="window-body">Window body</h4>
  <div>
    <blockquote>
      Every window has a boundary that defines its shape.

      <footer>
        &mdash; Microsoft Windows User Experience p. 118
      </footer>
    </blockquote>

    <p>
      To draw the contents of the window, we use the <code>window-body</code>
      class under the title bar. You may use the <code>has-space</code> class to add some padding
      to the window body.
    </p>

    <%- example(`
      <div class="window active" style="max-width: 300px">
        <div class="title-bar">
          <div class="title-bar-text">A window with contents</div>
          <div class="title-bar-controls">
            <button aria-label="Minimize"></button>
            <button aria-label="Maximize"></button>
            <button aria-label="Close"></button>
          </div>
        </div>
        <div class="window-body has-space">
          <p>There's so much room for activities!</p>
        </div>
      </div>
    `) %>

    <%- example(`
      <div class="window active" style="max-width: 400px">
        <div class="title-bar">
          <div class="title-bar-text">Another window with contents</div>
          <div class="title-bar-controls">
            <button aria-label="Minimize"></button>
            <button aria-label="Maximize"></button>
            <button aria-label="Close"></button>
          </div>
        </div>
        <div class="window-body has-space">
          <menu role="tablist" aria-label="Window with Tabs">
            <button role="tab" aria-controls="music" aria-selected="true">Music</button>
            <button role="tab" aria-controls="dogs">Dogs</button>
            <button role="tab" aria-controls="food">Food</button>
          </menu>
          <article role="tabpanel" id="music">
            <p>Set your listening preferences</p>
            <fieldset>
              <legend>Today's mood</legend>
              <div>
                <input id="radio${getNewId()}" type="radio" name="fieldset-example2">
                <label for="radio${getCurrentId()}">Nicki Minaj</label>
              </div>
              <div>
                <input id="radio${getNewId()}" type="radio" name="fieldset-example2">
                <label for="radio${getCurrentId()}">Bell Towers</label>
              </div>
              <div>
                <input id="radio${getNewId()}" type="radio" name="fieldset-example2">
                <label for="radio${getCurrentId()}">The Glamorous Monique</label>
              </div>
              <div>
                <input id="radio${getNewId()}" type="radio" name="fieldset-example2">
                <label for="radio${getCurrentId()}">EN. V</label>
              </div>
            </fieldset>
            <section style="display: flex; gap: 6px; align-items: center">
              <button>Reset Alarm...</button>
              <label>Try this to get some attention</label>
            </section>
          </article>

          <article role="tabpanel" hidden id="dogs">
            <img style="width: 100%"
              src="" />
          </article>

          <article role="tabpanel" hidden id="food">
            <p>
              You create the content for each tab by using an <code>article</code> tag.
            </p>
            <iframe width="100%" height="200" src="https://www.youtube.com/embed/TODJBQ0tnow" frameborder="0"
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen></iframe>
          </article>
          <section style="display: flex; justify-content: flex-end; gap: 6px">
            <button class="default">OK</button>
            <button>Cancel</button>
          </section>
        </div>
      </div>
    `) %>
  </div>
</section>